<template>
  <div ref="myRadar" class='radar-echart'>

  </div>
</template>

<script>
// 引入echarts 主模块
var echarts = require('echarts/lib/echarts')
// 引入雷达图
require('echarts/lib/chart/radar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  name:'MyRadar',
  mounted() {
    var myEchart = echarts.init(this.$refs.myRadar)

    
    myEchart.setOption(
     {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '考勤', max: 100},
            { name: '技术', max: 100},
            { name: '管理', max: 100},
            { name: '分享', max: 100},
            { name: 'deBug', max: 100},
            { name: '带徒', max: 100}
        ]
    },
    series: [{
        name: '老王 vs 小王',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [80, 87, 93, 85, 78, 90],
                name: '老王'
            },
            {
                value: [95, 75, 70, 80, 60, 0],
                name: '小王'
              }
         ]
        }]
      }
    )
  }
}
</script>

<style  lang='scss'>
.radar-echart {
  width: 600px;
  height: 400px;
}
</style>